<script setup lang="ts">
import { reactive, watch } from 'vue';
import { type IProps } from './props';
import { textToEmoji } from '@/utils/render';
import ArrowLeft from '../icon/ArrowLeft.vue';
import ArrowRight from '../icon/ArrowRight.vue';

const props = withDefaults(defineProps<IProps>(), {
  list: () => [],
});

const data = reactive({
  currentIndex: 0,
  showMore: false,
});

watch(
  () => props.list,
  () => {
    data.currentIndex = 0;
  },
  { deep: true }
);
</script>

<template>
  <div class="w-full h-full overflow-hidden relative z-100">
    <div v-for="(item, index) in list" v-show="index === data.currentIndex" :key="index"
      class="flex-row justify-between overflow-hidden py-2 px-[26px]">
      <div class="w-full flex flex-col gap-1 items-start">
        <div class="w-full flex flex-row items-center justify-between text-gray-600 text-[12px]">
          <span>
            {{
              item['comment_create_time']
                ? item['comment_create_time'].slice(5)
                : ''
            }}
            <span> {{ item['ip_label'] }}</span>
          </span>
          <span>{{ data.currentIndex + 1 }}/{{ list.length }}</span>
        </div>
        <div class="w-full h-full flex flex-col gap-1">
          <span class="block text-[13px] rounded-lg relative" @mouseenter="data.showMore = true"
            @mouseleave="data.showMore = false">
            <div class="w-full h-full truncate">
              <span class="text-[12px] text-gray-600">
                评论内容：
              </span>
              <span v-html="textToEmoji(item['text'])" />
            </div>
            <!-- 内容层 -->
            <div v-show="data.showMore"
              class="absolute m-auto top-[20px] h-fit w-full bg-orange-100 shadow-md rounded p-2"
              v-html="textToEmoji(item['text'])" />
          </span>
          <span class="text-[13px] rounded-lg">
            <span class="text-[12px] text-gray-600"> 博主： </span>
            <a class="text-orange-500" :href="`https://www.douyin.com/user/${item['blogger_sec_uid']}`" target="_blank">
              {{ item['blogger_nickname'] }}
              <span class="text-gray-900">
                [{{ item['ranking']['ip_location'] }}]
              </span>
            </a>
          </span>
          <span class="text-[13px] rounded-lg">
            <span class="text-[12px] text-gray-600">
              博主排名：
            </span>
            {{ item['ranking']['ranking'] }}
          </span>
          <span class="text-[13px] rounded-lg">
            <span class="text-[12px] text-gray-600">
              博主线索：
            </span>
            {{ item['ranking']['total'] }}
          </span>
          <span class="text-[13px] rounded-lg">
            <a class="text-blue-500" :href="`https://www.douyin.com/video/${item['aweme_id']}`" target="_blank">
              点击查看来源视频
            </a>
          </span>
        </div>
      </div>
    </div>
    <div v-if="list.length > 1" class="absolute h-fit inset-0 m-auto flex flex-row justify-between">
      <button class="outline-none text-[24px] hover:text-orange-400" @click="
        data.currentIndex =
        (data.currentIndex - 1 + list.length) % list.length
        ">
        <ArrowLeft />
      </button>
      <button class="outline-none text-[24px] hover:text-orange-400" @click="
        data.currentIndex = (data.currentIndex + 1) % list.length
        ">
        <ArrowRight />
      </button>
    </div>
  </div>
</template>

<style scoped></style>
